<template>
	<view class="countdown-time">
		<block v-if="date.d">
			<text>{{date.d}}</text>天
		</block>
		<block v-if="date.h">
			<text>{{date.h}}</text>时
		</block>
		<block v-if="date.m">
			<text>{{date.m}}</text>分
		</block>
		<block v-if="date.s">
			<text>{{date.s}}</text>秒
		</block>
	</view>
</template>

<script>
	export default {
		props:{
			diy_time:{
				type:Number,
				default:''
			}
		},
		data(){
			return {
				date:{
					d:0,
					h:0,
					m:0,
					s:0,
				}
			}
		},
		mounted() {
			this.setTime()
		},
		methods:{
			setTime(){
				var clearTime = setInterval(()=>{
					let localDate = Math.floor(new Date().valueOf()/1000);
					let time = this.diy_time - localDate;
					this.date = {d:0,h:0,m:0,s:0}
					if(time < 0){
						this.$emit('edit_time',false)
						clearInterval(clearTime)
					} else {
						if(60 * 60 * 24 < time){
							this.date.d = Math.floor(time/(60*60*24))
							time = time%(60*60*24)
						}
						if(60 * 60 < time){
							this.date.h = Math.floor(time/(60*60))
							time = time%(60*60)
							
						}
						if(60 < time){
							this.date.m = Math.floor(time/60)
							time = time%60
						}
						this.date.s = time
						if(!this.date.d && !this.date.h && !this.date.m && !this.date.s) {
							this.$emit('edit_time',false)
							clearInterval(clearTime)
						}
					}
				},1000)
				this.$forceUpdate()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.countdown-time{
		color: #fff;
		font-size: 24rpx;
		// margin-top: 10rpx;
		position: relative;
		z-index: 99999;
	}
</style>